<template>
	<div class="invitation-list-box">
		<div class="invitation-list-connect">
			<!--<div class="card" @click="linkCard">bilibili</div>-->
			<div v-if="tipTxetBoolen" class="invitation-list-header">{{tipText}}</div>
			<div class="tel-box" v-if="isTel">
				<span class="tel-tip">手机号码:</span><input @click="clickTelInput" @blur="blurRu" class="tel-input" type="number" placeholder="请填写手机号" v-model="telNum" ref="inputTel" />
				<div v-if="isRed" class="tel-btn" @click="savePhoneNum">确定</div>
				<div v-else class="tel-btn-gray">确定</div>
			</div>
			<ul v-if='isGRPM'>
				<li>
					<div class="list-left" v-if="personageData.c==0">
						<span class="no-personage">未进入排名</span>
					</div>
					<div class="list-left row-big-box" v-else>
						<p class="rowNo-num">{{personageData.rowNo}}</p>
						<p class="rowNo-pm">我的排名</p>
					</div>
					<div class="list-tx">
						<template v-if="personageData.avatar">
							<img v-if="$channel=='gdkj'" :src="personageData.avatar" />
							<img v-else :src="personageData.avatar.replace('http://','//')" />
						</template>
						<template v-else>
							<img  :src="mrTX" />
						</template>
						<!--<div class="no-share-box" v-if="personageData.c==0">
						</div>-->
					</div>
					<span class="list-niakname">{{personageData.nick}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{personageData.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<div class="cut-off-rule-box"></div>
				</li>
			</ul>
			<ul class="InvitationListArray-box">
				<li v-for="(v,index) in InvitationListArray">
					<template v-if="index<3">
						<div class="list-left">
							<img class="list-left list-left-img" :src="imgArray[index]" />
						</div>
						<div class="list-tx">
							<template v-if="v.avatar">
								<img v-if="$channel=='gdkj'" :src="v.avatar" />
								<img v-else :src="v.avatar.replace('http://','//')" />
							</template>
							<template v-else>
								<img :src="mrTX" />
							</template>
						</div>
					</template>
					<template v-else>
						<div class="list-left">
							{{index+1}}
						</div>
						<div class="list-tx">
							<template v-if="v.avatar">
								<img v-if="$channel=='gdkj'" :src="v.avatar" />
								<img v-else :src="v.avatar.replace('http://','//')" />
							</template>
							<template v-else>
								<img :src="mrTX" />
							</template>
						</div>
					</template>
					<span class="list-niakname">{{getNick(v.nick||v.fromUn)}}</span>
					<span class="list-text1">邀请</span><span class="list-text2">{{v.c}}</span><span class="list-text3">人</span>
					<div class="list-right"></div>
					<hr class="line" />
				</li>
			</ul>
			<p class="clickMore" @click="clickMore">{{moreTipText}}</p>
		</div>
		<div class="invited" @click="handelInvited" v-if="yqylShow">
			<div class="box">
				邀请有礼
			</div>
			<img class="pic" src="../assets/images/present.png">
		</div>
	</div>
</template>
<script>
  import fun from "../util/function"
  import config from "../config"

	export default {
		data() {
			return {
				InvitationListArray: [],
				InvitationListNewArray: [],
				imgArray: [
					require('../assets/images/num1.png'),
					require('../assets/images/num2.png'),
					require('../assets/images/num3.png'),
				],
				tipText: "",
				ownerid: this.$route.params.ownerid, // 主播id
				//anchor:window.localStorage.getItem('anchor'),
				tipTxetBoolen: false,
				page: 1,
				moreTipText: "",
				channelArr: [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX],
				yqylShow: false,
				isTel: false, //手机box显示不显示
				telNum: '',
				isRed: false,
				personageData: {}, //个人排行数据
				isGRPM:false,
				mrTX:require("../assets/images/gd_mr.png"),  //默认头像
			}
		},
		created: function() {
			//this.$store.dispatch('setRoomTab', 4)
			this.getInvitationList()
			this.$store.dispatch("isBoxTrue");

		},
		computed: {
			TabArray() {
				return this.$store.state.liveNavTabArray;
			},
		},
		watch: {
			TabArray() {
				let _this = this
				let TabArrayRuan = _this.$store.state.liveNavTabArray
				let channelArr = [config.ZHANGHANG_01, config.ZGYH, config.ZGYH_PX];
				for(let i = 0; i < TabArrayRuan.length; i++) {
					if(TabArrayRuan[i].type == "4" && TabArrayRuan[i].invitaCard == "1" && _this.cardIsYao) {
						console.log(22)
						_this.cardIsYao = false
						if(channelArr.indexOf(this.$channel) > -1) {
							setTimeout(function() {
								_this.yqylShow = true;
							}, 2000)
						}
					}
				}
			},
		},
		activated: function() {
			//this.getInvitationList()
			//this.$store.dispatch("setRoomTab", 4);
			var TabArray;
			if(sessionStorage.getItem("liveNavtable")) {
				TabArray = JSON.parse(sessionStorage.getItem("liveNavtable"))
			} else {
				TabArray = this.$store.state.liveNavTabArray
			}
			for(var i = 0; i < TabArray.length; i++) {
				if(TabArray[i].type == 4) {
					this.$store.dispatch("setRoomTab", ++i)
				}
			}
		},
		mounted: function() {
			this.getYQshow()
			this.getInviteFromUn()
//			this.personageData = {
//				'nick': 'ruanguangyuan',
//				'rowNo': 7,
//				'c': 0,
//				't': '2019-05-84',
//				'fromUn': 'Wxsjsdjjdksh',
//				'avatar': 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL2YmdibvwclzTy5iarYqKgDOn8b7icGTLDzkX1f0ee1C9R4cTWwNw9d607cUTJ9CgJyichR1ZSTk4lBQ/132',
//			}
		},
		filters: {

		},
		methods: {
			getInviteFromUn() { //个人排名
				let _this = this;
				_this.$http.get("/h5live/getInviteFromUn?roomId=" + this.$route.params.roomid).then(
					res => {
						//console.log(res.data.data)
						if(res.data.code == '000000') {
							_this.personageData = res.data.data
							if(!_this.$store.state.isYk){//游客不展示 个人信息
								_this.isGRPM = true
							}
						} else {
							console.log('个人邀请接口错误')
							_this.isGRPM = false
						}
					}
				)
			},
			//邀请卡显示不显示
			getYQshow() {
				let _this = this;
				_this.$http.get("/h5live/getRoomInvitaCard?roomId=" + this.$route.params.roomid).then(
					res => {
						if(res.data.code == "000000") {
							//console.log(res.data.data)
							//res.data.data.openMobile ='1'
							if(res.data.data.openMobile == '1') { //0是关闭  1是开启
								_this.isTel = true
								_this.getTelPhoneNum()
							} else {
								_this.isTel = false
							}
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//点击input
			clickTelInput() {
				this.$refs.inputTel.focus()
			},
			blurRu() { //input 失去焦点  解决ios 最新版本6.7.4 input BUG
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 100)
			},
			// 查询邀请榜手机号
			getTelPhoneNum() {
				let _this = this;
				_this.$http.get('/h5live/getInvitePhone?acct=' + _this.ownerid).then((res) => {
					if(res.data.code == '000000') {
						//console.log(res.data)
						//res.data.data=""
						if(res.data.data) { //有手机号码
							_this.telNum = res.data.data
							_this.isRed = false
						} else {
							_this.isRed = true
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//更新手机号码
			savePhoneNum() {
				let _this = this;
				//console.log(phoneNum)
				if(this.$store.state.isYk) {
					 let jointUrl = fun.getCurPageUrl('live',this.$route.params.roomid)
                     fun.ykDisposeFun(jointUrl)
					return
				}
				//console.log(_this.telNum.length)
				if(_this.telNum.length) {
					_this.$http.post('/h5live/saveInvitePhone?phone=' + _this.telNum + "&acct=" + _this.ownerid).then((res) => {
						if(res.data.code == '000000') { //应该为11位
							_this.isRed = false;
              fun.toastMessage("提交成功",3000)
						} else {
              fun.toastMessage("手机号码格式错误",3000)
						}
					}, (err) => {
						console.log(err);
					})
				} else {
          fun.toastMessage("手机号码不能为空",3000)
				}

			},
//			//设置头像默认值
//			getTxImg(imgData) {
//				fun.disposeTx(imgData);
//			},
			//设置昵称默认值
			getNick(nickDate) {
				return nickDate || "昵称"
			},
			getInvitationList: function() {
				let _this = this;
				_this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + _this.page).then((res) => {
					if(res.data.code == '000000') {
						//sconsole.log(res.data.data)
						if(res.data.data.invitaNote) {
							_this.tipTxetBoolen = true;
							_this.tipText = res.data.data.invitaNote;
						} else {
							_this.tipTxetBoolen = false;
						}
						_this.InvitationListArray = res.data.data.statList; //整个数组
						if(_this.InvitationListArray.length >= 10) {
							_this.moreTipText = "查看更多分享榜单"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			clickMore() {
				this.page++
					let _this = this;
				_this.$http.get('/h5live/shareInviteRank?roomId=' + this.$route.params.roomid + "&p=" + _this.page).then((res) => {
					if(res.data.code == '000000') {
						_this.InvitationListNewArray = res.data.data.statList; //整个数组
						for(var i = 0; i < _this.InvitationListNewArray.length; i++) {
							_this.InvitationListArray.push(_this.InvitationListNewArray[i]);
						}
						if(_this.InvitationListNewArray.length == 0) {
							_this.moreTipText = "没有更多数据"
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//针对中行的邀请有礼
			handelInvited() {
				if(this.$store.state.isYk) {
					this.$emit("imMessage", {
						"type": "YKTipPage"
					});
					return
				}
				this.$router.push(`/${this.$channel}/invitationCard`)
			}
		}
	}
</script>
<style scoped="scoped">
	.rowNo-pm {
		color: #D62F2F !important;
		font-size: 22px !important;
		margin-top: 20px;
	}

	.rowNo-num {
		color: #666666 !important;
		font-size: 36px !important;
		margin-top: 10px;
	}

	.row-big-box {
		width: 150px;
		display: felx;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		line-height: 20px !important;
	}

	/*.no-share-box {
		width: 30px;
		height: 30px;
		background: url(../assets/images/no-share.png) no-repeat;
		background-size: 30px 30px;
		border-radius: 50%;
		position: absolute;
		top: 70px;
		right: 0;
	}*/

	.no-personage {
		color: #D62F2F !important;
		font-size: 26px !important;
	}

	.InvitationListArray-box {
		margin-top: 25px;
	}

	.cut-off-rule-box {
		width: 750px;
		height: 20px;
		background: rgba(249, 249, 249, 1);
	}

	.tel-box {
		margin: 15px 0;
	}

	.tel-tip {
		color: #0C0C0C;
		font-size: 32px;
		margin-left: 30px;
	}

	.tel-input {
		width: 390px;
		height: 60px;
		background: rgba(246, 246, 246, 1);
		border-radius: 10px;
		margin-left: 30px;
		padding-left: 30px;
		font-size: 30px;
		color: #666666;
	}

	.tel-btn {
		width: 100px;
		height: 60px;
		background: rgba(214, 47, 47, 1);
		border-radius: 10px;
		line-height: 60px;
		text-align: center;
		color: white;
		font-size: 30px;
		display: inline-block;
		margin-left: 30px;
	}

	.tel-btn-gray {
		width: 100px;
		height: 60px;
		background: #C5C5C5;
		border-radius: 10px;
		line-height: 60px;
		text-align: center;
		color: #999999;
		font-size: 30px;
		display: inline-block;
		margin-left: 30px;
	}

	.invitation-list-box {
		position: absolute;
		background: white;
		width: 750px;
		height: calc(100vh - 564px);
	}

	.clickMore {
		width: 750px;
		font-size: 30px;
		color: #b5b5b5;
		text-align: center;
		margin: 20px 0 30px;
		line-height: 50px;
	}

	.invitation-list-header {
		font-size: 28px;
		color: white;
		background: -webkit-linear-gradient(left, right, #fa5f5f, #fa5f5f);
		display: inline-block;
		padding: 8px 50px 8px 36px;
		border-radius: 0 40px 40px 0;
		max-width: 650px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 30px 0 0 0;
		background: -webkit-linear-gradient(left top, #fa5f5f, #c9404d);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(bottom right, #fa5f5f, #c9404d);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(bottom right, #fa5f5f, #c9404d);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom right, #fa5f5f, #c9404d);
		/* 标准的语法（必须放在最后） */
		box-shadow: 10px 10px 40px #f8dbdb;
	}

	.invitation-list-connect {
		width: 100%;
		height: calc(100vh - 564px);
		overflow: scroll;
		padding-bottom: 200px;
	}

	.invitation-list-connect ul li {
		width: 750px;
		height: 115px;
	}

	.list-left {
		width: 150px;
		height: 115px;
		line-height: 115px;
		text-align: center;
		/*	background: greenyellow;*/
		/*margin-left: 32px;*/
		font-size: 24px;
		color: #494949;
		float: left;
		background-size: 49px 75px;
		display: flex;
		justify-content: center;
	}

	.list-left-img {
		width: 55px;
		height: 75px;
		border: none;
		background-size: 49px 75px;
		margin: 20px 0 0 0;
	}

	.list-tx {
		width: 66px;
		height: 115px;
		/*background: url(../assets/images/person_15.png) no-repeat center center;*/
		display: inline-block;
		float: left;
		border-radius: 50%;
		background-size: 65px 65px;
		position: relative;
	}

	.list-tx img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		margin-top: 27px;
		background-size: 65px 65px;
	}

	.list-niakname {
		width: 250px;
		height: 115px;
		float: left;
		margin-left: 32px;
		/*	background: #4381F8;*/
		line-height: 115px;
		text-align: left;
		font-size: 28px;
		color: #6b6969 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.invitation-list-connect ul li span {
		color: #b5b5b5;
		font-size: 28px;
		line-height: 115px;
	}

	.list-text1 {
		margin-left: 10px;
	}

	.list-text2 {
		width: 90px;
		height: 115px;
		/*		background: green;*/
		display: inline-block;
		text-align: center;
		color: rgb(204, 53, 56) !important;
	}

	.list-text3 {
		margin: 0 20px 0 5px;
	}

	.line {
		width: 88%;
		background: #e2e2e2!important;
		margin-left: 40px;
		height: 2px;
		border: none;
	}

	.list-right {
		width: 17px;
		height: 115px;
		background: url(../assets/images/to_11.png) no-repeat center center;
		float: right;
		margin-right: 22px;
		background-size: 17px 29px;
		animation: ruan 3s linear infinite;
	}

	@keyframes ruan {
		0% {
			transform: translateY(-10px);
		}
		50% {
			transform: translateY(10px);
		}
		100% {
			transform: translateY(-10px);
		}
	}
	/*.card{
		width: 80px;
		height: 80px;
		border-radius: 100%;
		background: seagreen;
		font-size: 20px;
		text-align: center;
		line-height: 80px;
		position: fixed;
		top: 650px;
		right: 40px;
		color: blue;
	}*/
	/* 中行邀请有礼 */

	.invited {
		position: fixed;
		bottom: 146px;
		right: 40px;
	}

	.invited .box {
		width: 216px;
		height: 66px;
		/* background:linear-gradient(-30deg,rgba(255,160,113,1),rgba(255,135,138,1)); */
		background: linear-gradient(-30deg, #FF878A, #FFA071);
		box-shadow: 0px 3px 3px 0px rgba(27, 28, 31, 0.15);
		border-radius: 30px;
		font-size: 38px;
		color: #fff;
		text-align: center;
		line-height: 66px;
		/* display: flex;
align-items: center; */
		font-family: -apple-system-font, sans-serif;
	}

	@keyframes heartbeat {
		0% {
			transform: scale(1, 1);
		}
		25% {
			transform: scale(1.2, 1.2);
		}
		100% {
			transform: scale(1, 1);
		}
	}

	.invited .pic {
		width: 46px;
		position: absolute;
		left: -22px;
		top: 10px;
		animation: heartbeat 1s infinite;
		-webkit-animation: heartbeat 0.8s infinite;
	}
</style>
